<template>
    <div id="index__select-list" class="index-1">
       <div class="list-title">
            <span>{{ itemTitle }}</span>
       </div>

       <div class="index-items">
            <div @click="trans2(item.url as any)" class="select-item" v-for="(item, index) in props.items" :key="index">
                <div class="item-text">
                    <div class="item-anima">
                        <span>{{item.text}}</span>
                    </div>
                </div>
                
                <div v-if="item.isShow"   class="index-2">
                    <div class="index-2__content">
                    
                        <div @click="trans2(index2Item.url as any)" class="index-2__item" v-for="(index2Item,index) in item.children">
                            <span>{{index2Item.text}}</span>
                        </div>

                    </div>
                </div>

            </div>
       </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, defineProps, PropType } from 'vue';
import { useRouter } from 'vue-router';
import { Item } from './Interfaces';

const props = defineProps({
    items:{
        type:Array as PropType<Item[]>,
        default: new Array<Item>
    },
    itemTitle:{
        type:String,
    }
})

const router = useRouter()
const trans2 = (name:string)=>{
    if(name == 'undefined'){
        return
    }
    router.push({
        name:name
    })
}
onMounted(() => {
    console.log(props.items);
})
</script>

<style scoped lang="less">

@keyframes index1SlideIn {
    0%{
        width: 20rem;
    }
    100%{
        width: 25rem;
    }
}
#index__select-list{
    animation: index1SlideIn 0.2s;
    animation-fill-mode: forwards;
    height: 100%;
    color: aliceblue;
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
    opacity: 1;
    

    .list-title{
        font-size: 3rem;
        padding-left: 2rem;
        padding-bottom: 2rem;
    }

    .index-items{
        flex: 1;

        // background-color: aqua;

        .select-item{
            // position: relative;
            height: 4rem;
            width: 100%;
            .item-text{
                position: relative;
                width: 100%;
                white-space: nowrap;
                height: 100%;
                margin-right: 5rem;

                
                font-size: 1.6rem;

                .item-anima{
                    z-index: 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: flex;
                    align-items: center;
                    padding-left: 2rem;
                    height: 100%;
                    width: 10%;
                    
                }
            }
            .index-2{
                position: absolute;
                left: 100%;
                top: 0;
                height: 100%;
                width: 40rem;
                background-color: rgba(101, 235, 204, 0.364);
                display: none;
                padding-top: 12rem;
                padding-left: 2rem;

                .index-2__content{

                    .index-2__item{
                        height: 4rem;
                        cursor: pointer;

                    }
                    .index-2__item :hover{
                        text-decoration: underline;
                    }
                }
            }


        }

        @keyframes item_anima {
                0%{
                    width: 70%;
                }
                100%{
                    width: 100%;
                }
            }

        :hover .index-2{
            display: block;
        }
        :hover .item-anima{
            animation:item_anima 0.2s ;
            animation-fill-mode: forwards;
            background-color: rgb(117, 203, 203);
            text-decoration: underline;
            cursor: pointer;
        }

    }



}

.index-1{
    width: 27rem;
    background-color: rgba(63, 206, 206, 0.695);
}
</style>
